import React from 'react';
import styles from  './uc-swiper.module.css';

// import img1 from './images/img_1.jpg';
// import img2 from './images/img_2.jpg';

import Swipe from './js/swipe'
import $ from 'jquery';

import propsTypes from 'prop-types';
import {withRouter} from 'react-router-dom'

class UcSwiper extends React.Component{

  // props :  data=[{id,title,sub_title,banner},{},{}]
  // props :  to = {pathname,apiname}

  static defaultProps = {

  };

  static propTypes = {  // npm 查看 prop-types 用法
    data: propsTypes.arrayOf(propsTypes.shape({
      id: propsTypes.string.isRequired,
      title: propsTypes.string,
      sub_title: propsTypes.string,
      banner: propsTypes.string.isRequired
    })).isRequired,
    to: propsTypes.shape({
      pathname: propsTypes.string.isRequired,
      apiname: propsTypes.string.isRequired,
    })
  };

  componentDidMount(){
    new Swipe($(`.${styles.banner}`)[0],{
      auto:2000,
      continuous:true,
      stopPropation:true,
      callback:function (index,element){
        $('.banner ol li').removeClass('active');
        $('.banner ol li').eq(index).addClass('active');
      }
    })
  }

  to = (id) => {
    if (!this.props.to) return;//to 不存在 ， 后续点击无动作
    // alert('跳转')
    let {history,to:{pathname,apiname}} = this.props;//深度结构
    history.push({pathname:`${pathname}/${id}`,search:`apiname=${apiname}`})
  };

  render(){
    let { data }=this.props;
    return (
      <div className={styles.banner}>
        <ul className="clearfix">
          {
            data.map(item=>(
              <li key={item.id} onClick={()=>this.to(item.id)}>
                <img src={item.banner} alt=""/>
                <div className={styles["text-box"]}>
                  <h2>{item.title}</h2>
                  <p>{item.sub_title}</p>
                </div>
              </li>
            ))
          }

        </ul>

      </div>
    )
  }
}

export default withRouter(UcSwiper)